import {
    Input,
    Select,
    Space,
    Button,
    Table,
    Modal,
    message,
} from 'antd';
import { useState, useEffect } from 'react';
import { useNavigate } from "react-router-dom";
import { CheckCircleTwoTone } from '@ant-design/icons';
import styles from './MemberManagement.module.css'
import myAxios from "../../../utils/myAixos"
//import AddMembers from './AddMembers';
const MemberManagement = () => {
    const columns = [
        {
            title: '成员账号',
            dataIndex: 'u_user',
            align: 'center'
        },
        {
            title: '姓名',
            dataIndex: 'u_name',
            align: 'center'
        },
        {
            title: '邮箱地址',
            dataIndex: 'u_email',
            align: 'center'
        },
        {
            title: '所属部门',
            dataIndex: 'u_department',
            align: 'center'
        },
        {
            title: '添加时间',
            dataIndex: 'u_loginTime',
            align: 'center'
        },
        {
            title: '最后登录',
            dataIndex: 'u_exitTime',
            align: 'center'
        },
        {
            title: '是否启用',
            dataIndex: 'u_status',
            align: 'center'
        },
        {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (_, record) => (
                <div className={styles["hh"]}>
                    <span onClick={() => { edit(record) }}>编辑</span>
                    <span onClick={() => { deleteUser1(record) }}>删除</span>
                </div>
            ),
        },
    ];
    // const data = [];
    const [data, setData] = useState()
    //关闭module
    const [open, setOpen] = useState(false);
    const navigate = useNavigate();
    //input的值
    const [inpText, setInpText] = useState()
    //select的值
    const [selectT, setSelecT] = useState()
    //每行的id
    const [myId, setMyId] = useState()
    //每行的部门
    const [myDepartment, setMyDepartment] = useState()
    //列表全部数据
    let [hwSelect,setHwSelect] = useState([])
    //搜索框数据
    let [wwData,setWwData] = useState([])
    //input的onChange
    const ChangText = (ev) => {
        setInpText(ev.target.value)
    }
    //select的onChange
    const handleChange = (value) => {
        setSelecT(value)
    }
    //查询按钮 
    const chaXun = () => {
        //console.log(inpText)
        //console.log(selectT)
        if (inpText === undefined || selectT === undefined) {
            userList()
        } else {
            myAxios({
                url: "/userSearch",
                method: "post",
                data: {
                    u_name: inpText,
                    u_department: selectT
                }
            }).then(res => {
                //console.log(res.data.data)
                if (res.data.status === 200) {
                    setData(res.data.data)
                    message.success('查询成功')
                } else {
                    message.info('暂无数据')
                }
                setInpText(undefined)
                setSelecT(undefined)
            })
        }
    }
    //表格编辑
    const edit = (row) => {
        //console.log(row)
        navigate('/HomePage/EditMembers',{ state: {id:row.u_id} })
    }
    //跳转添加
    const addUser = () => {
        navigate('/HomePage/AddMembers')
    }
    //删除用户确定
    const deleteUser2 = () => {
        setOpen(false)
        let hwNumber;
        for(let i=0;i<hwSelect.length;i++){
            if(hwSelect[i].r_bumen===myDepartment){
                console.log(99,hwSelect[i].r_number)
                hwNumber = parseInt(hwSelect[i].r_number)-1
            }
        }
        myAxios({
            url: "/userDel",
            method: "post",
            data: {
                u_id: myId,
                u_department:myDepartment,
                number:hwNumber
            }
        }).then(res => {
            console.log(res)
            // if (res.data.status === 200) {
            //     message.success('添加成功')
            // } else {
            //     message.success('添加失败') 
            // }
        })
        let arr = data.filter((item) => {
            return item.u_id !== myId
        })
        setData(arr)
        message.success('删除成功')
    }
    //删除按钮
    const deleteUser1 = (row) => {
        setOpen(true)
        setMyId(row.u_id)
        setMyDepartment(row.u_department)
    }
    //获取用户数据
    const userList = () => {
        myAxios({
            url: "/user",
            method: "post",
            data: {
            }
        }).then(res => {
            if (res.data.status === 200) {
                console.log(res.data.data)
                setData(res.data.data)
            } else {
                //跳转到404页面 
            }
        })
    }
    useEffect(() => {
        userList()
        myAxios({
            url: "/getRoleLine",
            method: "post",
            data: {
            }
        }).then(res => {
            setHwSelect(res.data.data)
            let wwArr = []
            let newArr = []
            for(let i of res.data.data){
                wwArr.push(i.r_bumen)
            }
            //console.log('wwArr',wwArr)
            for(let i=0;i<wwArr.length;i++){
                let as = {}   
                as.value = wwArr[i];
                as.label = wwArr[i]
                newArr.push(as)
            }
            //console.log('newArr',newArr)
            setWwData(newArr)
        })
    }, [])
    return (
        <div style={{ width: '100%', height: '100%' }}>
            <div style={{ width: '97%', height: '32px', margin: '13px auto', display: 'flex', justifyContent: 'flex-start' }}>
                <Input style={{ width: '14%', height: '100%' }} placeholder="用户名/姓名" value={inpText} onChange={ChangText} />
                <Space wrap>
                    <Select
                        placeholder="选择所属部门"
                        style={{
                            width: 140,
                            textAlign: 'left',
                            margin: '0 10px'
                        }}
                        value={selectT}
                        onChange={handleChange}
                        options={wwData}
                    />
                </Space>
                <Button style={{ marginRight: '10px', width: '80px' }} type="primary" onClick={chaXun}>查询</Button>
                <Button style={{ width: '80px' }} onClick={addUser}>添加</Button>
            </div>
            <div style={{ width: '97%', height: '90%', border: '1px solid #cccccc', margin: '0 auto' }}>
                <Table columns={columns} dataSource={data} pagination={{ defaultPageSize: 8 }} rowKey={(record) => record.u_id} />
            </div>
            <Modal
                title="确认提示"
                centered
                open={open}
                cancelText='取消'
                okText='确定'
                onOk={() => deleteUser2()}
                onCancel={() => setOpen(false)}
                width={400}
            >
                <div style={{ display: 'flex', marginTop: '20px', alignItems: 'center' }}>
                    <CheckCircleTwoTone twoToneColor='red' style={{ fontSize: '40px' }} />
                    <div style={{ display: 'flex', flexDirection: 'column', marginLeft: '10px' }}>
                        <span>系统提示</span>
                        <span>确定要删除该角色吗？</span>
                    </div>
                </div>
            </Modal>
        </div>
    )
}

export default MemberManagement